<!-- 公告详情页 -->
<template>
  <!--  <a href="#top"></a>-->
  <el-container>

    <!--   公告标题   -->
    <el-header>
      <div style="text-align: center;" id="top"><h1 style="color: #4154c7;">header 显示标题处{{
          noticeInfoArr.title
        }}</h1></div>
    </el-header>


    <el-container>
      <!--    公告主体内容  -->
      <el-main>
        <!--  <header> header 显示标题处{{ noticeInfoArr.title }}</header>-->
        <!--  <div style="text-align: center;" id="top"><h1 style="color: #4154c7;">显示标题处{{ noticeInfoArr.title }}</h1></div>-->
        <div style="margin: 30px;align-content: center;margin: 0 auto;">

          <el-descriptions title="公告详情" :border="true" :column="3" v-model="noticeInfoArr">
            <template #extra>
              <el-button type="primary" @click="goBack">返回</el-button>
            </template>

            <el-descriptions-item label="发布者" width="75px">
              <template #label>
                <el-icon>
                  <Avatar/>
                </el-icon>
                发布者
              </template>
              <div style="width: 80px"> 发布人名字{{ noticeInfoArr.createPeople }}</div>
              <!--        发布人名字{{ noticeInfoArr.createPeople }}-->
            </el-descriptions-item>

            <el-descriptions-item label="发布时间" width="75px">
              <template #label>
                <el-icon>
                  <Timer/>
                </el-icon>
                发布时间
              </template>
              {{ noticeInfoArr.createTime }}
              显示时间
            </el-descriptions-item>

            <el-descriptions-item label="公告类型" width="75px">
              <template #label>
                <el-icon>
                  <WarningFilled/>
                </el-icon>
                公告类型
              </template>
              {{ noticeInfoArr.type }}
              类型
            </el-descriptions-item>

            <el-descriptions-item label="公告内容" span="3" width="75px">
              <template #label>
                <el-icon>
                  <Files/>
                </el-icon>
                公告内容
              </template>
              {{ noticeInfoArr.content }}
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br> Cupiditate delectus dicta
              dolores error esse ex natus necessitatibus nesciunt qui quia? <br>Accusamus accusantium
              alias architecto expedita itaque, iusto quos repudiandae tempora.<br>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br> Cupiditate delectus dicta
              dolores error esse ex natus necessitatibus nesciunt qui quia?<br> Accusamus accusantium
              alias architecto expedita itaque, iusto quos repudiandae tempora.<br>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br> Cupiditate delectus dicta
              dolores error esse ex natus necessitatibus nesciunt qui quia? <br>Accusamus accusantium
              alias architecto expedita itaque, iusto quos repudiandae tempora.<br>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br> Cupiditate delectus dicta
              dolores error esse ex natus necessitatibus nesciunt qui quia?<br> Accusamus accusantium
              alias architecto expedita itaque, iusto quos repudiandae tempora.<br>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br> Cupiditate delectus dicta
              dolores error esse ex natus necessitatibus nesciunt qui quia? <br>Accusamus accusantium
              alias architecto expedita itaque, iusto quos repudiandae tempora.<br>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br> Cupiditate delectus dicta
              dolores error esse ex natus necessitatibus nesciunt qui quia?<br> Accusamus accusantium
              alias architecto expedita itaque, iusto quos repudiandae tempora.<br>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Cupiditate delectus dicta
              dolores error esse ex natus necessitatibus nesciunt qui quia? <br>Accusamus accusantium
              alias architecto expedita itaque, iusto quos repudiandae tempora.<br>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br> Cupiditate delectus dicta
              dolores error esse ex natus necessitatibus nesciunt qui quia? <br>Accusamus accusantium
              alias architecto expedita itaque, iusto quos repudiandae tempora.<br>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br> Cupiditate delectus dicta
              dolores error esse ex natus necessitatibus nesciunt qui quia?<br> Accusamus accusantium
              alias architecto expedita itaque, iusto quos repudiandae tempora.<br>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Cupiditate delectus dicta
              dolores error esse ex natus necessitatibus nesciunt qui quia? <br>Accusamus accusantium
              alias architecto expedita itaque, iusto quos repudiandae tempora.<br>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Cupiditate delectus dicta
              dolores error esse ex natus necessitatibus nesciunt qui quia? <br>Accusamus accusantium
              alias architecto expedita itaque, iusto quos repudiandae tempora.<br>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Cupiditate delectus dicta
              dolores error esse ex natus necessitatibus nesciunt qui quia?<br> Accusamus accusantium
              alias architecto expedita itaque, iusto quos repudiandae tempora.<br>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br> Cupiditate delectus dicta
              dolores error esse ex natus necessitatibus nesciunt qui quia? <br>Accusamus accusantium
              alias architecto expedita itaque, iusto quos repudiandae tempora.<br>


            </el-descriptions-item>

            <el-descriptions-item label="还未查看公告的人" span="3" width="75px">
              <template #label>
                <el-icon>
                  <UserFilled/>
                </el-icon>
                还未查看公告的人
              </template>
              <el-tag v-for="item in NotCheckEmp">{{ item.name }}</el-tag>
            </el-descriptions-item>
          </el-descriptions>

          <el-button @click="goBack" type="primary" style="margin: 20px 20px">返回</el-button>
        </div>
      </el-main>

      <!--  到顶部toTOP  侧边栏 -->
      <el-aside style="position: relative;right: 0;top: 80px;bottom:0;display: flex;width: 200px;">
        <div  id="btn" class="btn" >
          <a href="#top" style="width: 100px;height: 100px;border-radius: 50%;text-align: center;
          position: fixed;right: 20px;bottom: 20px;scroll-behavior: smooth;">
            <!--            <div style="height: 100px;width: 100px;background-color: #4154c7;text-align: center;line-height: 100px;">-->
           <span style="text-align: center;line-height: 100px;"> <img src="/img/arrowhead_up.png"/>  </span>
            <!--            </div>-->
          </a>
        </div>
      </el-aside>
    </el-container>
  </el-container>


</template>
<script setup>
import router from "@/router";
import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage, formatter} from "element-plus";

//回到顶部功能
const btn = document.getElementById("btn");
document.addEventListener('scroll',()=>{
  if (document.documentElement.scrollTop>document.documentElement.clientHeight){
    btn.style.display="block";
  }else{
    btn.style.display="none";
  }
})
window.onscroll=()=>{
  //获取页面滑动的距离  document.documentElement.scrollTop
  if (document.documentElement.scrollTop>300){
    btn.style.display="block";
  }else{
    btn.style.display="none";
  }
}


//定义变量用来保存搜索公告的条件
//获取从URL中得到的查询字符串参数
const noticeId = new URLSearchParams(window.location.search).get('id');
//定义数组用来保存公告详情数据
const noticeInfoArr = ref({
  title: '',
  createPeople: '',
  createTime: '',
  content: '',
  type: ''
});
//定义一个数组，用来保存未查看公告信息的人
const NotCheckEmp = ref([]);
//通过参数中得到的noticeId，查询得到某一条对应的公告详情
const selectNoticeInfo = () => {
  //通过noticeId，get查询得到数据
  // noticeInfoArr.value=response.data.data[0];
}
onMounted(() => {
  selectNoticeInfo();
  selectNoConfirmPeople();
});

//定义返回公告列表页面的方法
const goBack = () => {
  router.push('/notice');
};
const selectNoConfirmPeople = () => {
  //表 checkNotice : id 、noticeId 、empId 、status(1:已读、0:未读)
  //通过checkNotice中查询得到empId，再从职员表中查询得到员工数据List ，给NotCheckEmp.value
}

</script>

<style>
.btn{
  height: 200px;
  width: 100px;
  position: absolute;
  //background-color: #f0c24c;
}
html {
  height: 100%;
  scroll-behavior: smooth !important;
}

.back {
  overflow: scroll;
  height: 100%;
}

.content {
  height: 100%;
}
</style>